<template>
	<a-modal title="审核" :width="1200" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading"
		@ok="handleSubmit" @cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-form-item label="主键" style="display: none;" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input v-decorator="['replaceApplyId']" disabled />
				</a-form-item>
				<a-row>
					<a-col :span="12">
						<a-form-item label="提交人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['submitMan']" disabled />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['createTime']" disabled />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-select v-decorator="['executeStatus']" disabled>
								<a-select-option :value="1">
									待审核
								</a-select-option>
								<a-select-option :value="2">
									通过
								</a-select-option>
								<a-select-option :value="3">
									拒绝
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<span style="font-weight: bolder;font-size: 18px;margin-left: 20px;">原物料</span>
						<a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['emsMaterialResult.materialTypeName']" disabled />
						</a-form-item>
						<a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['emsMaterialResult.materialName']" disabled />
						</a-form-item>
						<a-form-item label="料号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['emsMaterialResult.materialCode']" disabled />
						</a-form-item>
						<a-form-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['emsMaterialResult.materialModelNumber']" disabled />
						</a-form-item>
						<a-form-item label="成本价" v-show="managerOrFinance()" :labelCol="labelCol" :wrapperCol="wrapperCol"
							has-feedback="">
							<a-input v-decorator="['emsMaterialResult.costPrice']" disabled />
						</a-form-item>
						<a-form-item label="采购价" v-show="managerOrFinance()" :labelCol="labelCol" :wrapperCol="wrapperCol"
							has-feedback="">
							<a-input v-decorator="['emsMaterialResult.purchasePrice']" disabled />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<span style="font-weight: bolder;font-size: 18px;margin-left: 20px;">替换物料</span>
						<a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['replaceEmsMaterialResult.materialTypeName']" disabled />
						</a-form-item>
						<a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['replaceEmsMaterialResult.materialName']" disabled />
						</a-form-item>
						<a-form-item label="料号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['replaceEmsMaterialResult.materialCode']" disabled />
						</a-form-item>
						<a-form-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
							<a-input v-decorator="['replaceEmsMaterialResult.materialModelNumber']" disabled />
						</a-form-item>
						<a-form-item label="成本价" v-show="managerOrFinance()" :labelCol="labelCol" :wrapperCol="wrapperCol"
							has-feedback="">
							<a-input v-decorator="['replaceEmsMaterialResult.costPrice']" disabled />
						</a-form-item>
						<a-form-item label="采购价" v-show="managerOrFinance()" :labelCol="labelCol" :wrapperCol="wrapperCol"
							has-feedback="">
							<a-input v-decorator="['replaceEmsMaterialResult.purchasePrice']" disabled />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<span style="font-weight: bolder;font-size: 18px;margin-left: 20px;">
						<span v-if="bomType == 1">基础BOM</span>
						<span v-if="bomType == 2">组合BOM</span>
						<span v-if="bomType == 3">海外仓产品</span>
					</span>
					<a-table :columns="columns" :data-source="dataSource">
						<!-- <span slot="action" slot-scope="text, record">
							<a>详情</a>
						</span> -->
						<!-- <span slot="image" slot-scope="text, record">
							<image-preview :images="text" />
						</span> -->
						<span slot="image" slot-scope="text,record">
							<image-preview1 :images="text" :imageUrl="record.imageUrl" />
						</span>
						<!-- <span slot="action1" slot-scope="text, record">
							<a>详情</a>
						</span> -->
					</a-table>
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-form-item label="审核结果" :labelCol="{
							xs: { span: 2 },
							sm: { span: 2 }
						}" :wrapperCol="{
							xs: { span: 24 },
							sm: { span: 15 }
						}" has-feedback="">
							<a-radio-group :disabled="disabled"
								v-decorator="['executeStatus1', { rules: [{ required: true, message: '请选择审核结果！' }] }]"
								style="width: 100%;">
								<a-radio :value="2">
									通过
								</a-radio>
								<a-radio :value="3">
									不通过
								</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="备注" :labelCol="{
							xs: { span: 2 },
							sm: { span: 2 }
						}" :wrapperCol="{
							xs: { span: 24 },
							sm: { span: 15 }
						}" has-feedback="">
							<a-textarea :disabled="disabled" :auto-size="{ minRows: 2, maxRows: 6 }" v-decorator="['remark']" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { detail, emsReplaceBomPage, audit } from '@/api/modular/main/emsReplaceApply/emsReplaceApply'

export default {
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			columns: [
				// {
				// 	title: '序号', width: '80px',
				// 	align: 'center',
				// 	customRender: (text, record, index) => `${index + 1}`,
				// },
				// {
				// 	title: 'BOM名称',
				// 	dataIndex: 'age',
				// },
				// {
				// 	title: 'BOM编码',
				// 	dataIndex: 'age',
				// },
				// {
				// 	title: '分类',
				// 	dataIndex: 'age',
				// },
				// {
				// 	title: '照片',
				// 	dataIndex: 'age',
				// },
				// {
				// 	title: '操作',
				// 	dataIndex: 'age',
				// }
			],
			dataSource: [],
			bomType: 1,
			executeStatus: null,
			disabled: false,
		}
	},
	methods: {
		edit(record) {
			this.visible = true
			this.bomType = record.type
			if (record.type == 3) {
				this.columns = [
					{
						title: '序号', width: '80px',
						align: 'center',
						customRender: (text, record, index) => `${index + 1}`,
					},
					{
						title: '产品名称',
						dataIndex: 'emsMaterialResult.materialName',
					},
					{
						title: '料号',
						width: '200px',
						dataIndex: 'emsMaterialResult.materialCode',
					},
					{
						title: '规格',
						width: '220px',
						dataIndex: 'emsMaterialResult.materialModelNumber',
					},
					{
						title: '照片',
						dataIndex: 'emsMaterialResult.image',
						scopedSlots: { customRender: 'image' }
					},
					// {
					// 	title: '操作',
					// 	dataIndex: 'action1',
					// 	scopedSlots: { customRender: 'action1' }
					// }
				]
			} else {
				this.columns = [
					{
						title: '序号', width: '80px',
						align: 'center',
						customRender: (text, record, index) => `${index + 1}`,
					},
					{
						title: 'BOM名称',
						dataIndex: 'emsBomResult.bomName',
					},
					{
						title: 'BOM编码',
						dataIndex: 'emsBomResult.bomCode',
					},
					{
						title: '分类',
						dataIndex: 'emsBomResult.bomClassName',
					},
					{
						title: '照片',
						dataIndex: 'emsBomResult.image',
						scopedSlots: { customRender: 'image' }
					},
					// {
					// 	title: '操作',
					// 	dataIndex: 'action',
					// 	scopedSlots: { customRender: 'action' }
					// }
				]
			}
			this.getDetails(record.replaceApplyId);
			this.disabled = false;
		},
		readonly(record) {
			this.edit(record);
			this.disabled = true;
		},
		/**
		 * 获取关联bom
		 * @param replaceApplyId 
		 */
		getEmsBomList(replaceApplyId) {
			emsReplaceBomPage({
				replaceApplyId: replaceApplyId
			}).then(res => {
				this.dataSource = res.data.rows;
				this.confirmLoading = false;
			})
		},
		getDetails(replaceApplyId) {
			this.confirmLoading = true;
			detail({
				replaceApplyId: replaceApplyId
			}).then(res => {
				console.log("res", res);
				console.log("disabled", this.disabled);
				setTimeout(() => {
					this.form.setFieldsValue({
						...res.data,
						executeStatus1: this.disabled ? res.data.executeStatus : null
					});
				}, 100)
				this.getEmsBomList(replaceApplyId);
			})
		},
		handleSubmit() {
			const { form: { validateFields } } = this
			// if (this.executeStatus == null) {
			// 	this.$message.error('请选择审核结果');
			// 	return
			// }
			this.confirmLoading = true
			validateFields((errors, values) => {
				if (!errors) {
					let params = {
						replaceApplyIds: [values.replaceApplyId],
						remark: values.remark,
						executeStatus: values.executeStatus1
					}
					audit(params).then((res) => {
						this.confirmLoading = false
						if (res.success) {
							this.$message.success('审核成功')
							this.handleCancel()
							this.$emit('ok')
						} else {
							this.$message.info('编辑失败：' + res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields();
			this.visible = false
		}
	}
}
</script>
